<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>html5 css3</title>
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <style media="screen">
    html,body,p,h1,h2,h3,h4,h5,ul,li{
      margin: 0;
      padding: 0;
    }
    body{
      font: 14px/1.5 'Microsoft YaHei';
      background: rgb(13, 206, 203);

    }
    a{
      text-decoration: none;
      color: #fff;
    }



    .loading,
    .loading:before,
    .loading:after {
      background: #FFF;
      animation: load1 1s infinite ease-in-out;
      width: 10px;
      height: 40px;
    }
    .loading:before,
    .loading:after {
      position: absolute;
      top: 0;
      content: '';
    }
    .loading:before {
      left: -15px;
    }
    .loading {
      text-indent: -9999px;
      margin: 100px auto;
      position: relative;
      font-size: 12px;
      animation-delay: 0.16s;
    }
    .loading:after {
      left: 15px;
      animation-delay: 0.32s;
    }

    @keyframes load1 {
      0%,
      80%,
      100% {
        box-shadow: 0 0 #fff;
        height: 40px;
      }
      10% {
        box-shadow: 0 -20px #fff;
        height: 50px;
      }
    }



    </style>
  </head>
  <body>

  <main>
    <div class="loading">loading....</div>
  </main>
  <footer>

  </footer>
  </body>
</html>
